<template>

</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  import {
    getMenu

  } from '@/api/home/home'
  export default {
    name: 'Fullscreen',
    computed: {
      ...mapState({

      }),
      showFullScreenBtn() {
        return window.navigator.userAgent.indexOf('MSIE') < 0
      }

    },
    props: {
      value: {
        type: Boolean,
        default: false
      }
    },
    created() {

      // this.showNotice('下单通知','您有新的订单');

      let _this = this;
      // setTimeout(function() {
      //   _this.initWebSocket()
      // }, 2000)
    },
    data() {
      return {
        menuList:[],
        admin_id: 0, //当前登录人id
      }
    },
    methods: {
      ...mapMutations([

      ]),
      handleFullscreen() {
        let main = document.body
        if (this.value) {
          if (document.exitFullscreen) {
            document.exitFullscreen()
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen()
          } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen()
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen()
          }
        } else {
          if (main.requestFullscreen) {
            main.requestFullscreen()
          } else if (main.mozRequestFullScreen) {
            main.mozRequestFullScreen()
          } else if (main.webkitRequestFullScreen) {
            main.webkitRequestFullScreen()
          } else if (main.msRequestFullscreen) {
            main.msRequestFullscreen()
          }
        }
      },
      handleChange() {
        this.handleFullscreen()
      },
      //消息通知弹出
      showNotice(title, content,id=0) {

        this.$Notice.info({
          title: title,
          desc: content
        });

        //设置消息已读
        if(id>0){
          this.noticeId = id;
          this.setRead();
        }
      },
      // 消息通知websocket
      initWebSocket() { //初始化weosocket
        const wsuri = "ws://39.104.85.61:20020";
        this.websock = new WebSocket(wsuri);
        this.websock.onmessage = this.websocketonmessage;
        this.websock.onopen = this.websocketonopen;
        this.websock.onerror = this.websocketonerror;
        this.websock.onclose = this.websocketclose;

      },
      websocketonopen() { //连接建立之后执行send方法发送数据
        let _this = this;
        let sendData = JSON.stringify({
          command: 'init',
          param: {
            user_id: _this.admin_id, //当前登录人id
            bussiness_id: 0, //商家id 0
            user_type: 0,  //0 总管理后台
            is_subscribe: 1 //是否自动订阅
          }
        })

        console.log(sendData)

        sendData = this.encryptDesIv(sendData);
        this.websocketsend(sendData);
        this.startHeart();
      },

      websocketonmessage(e) { //数据接收
        const redata = JSON.parse(e.data);

        if (redata.data.command == 'send') {
          this.showNotice(redata.data.content.title, redata.data.content.msg);

          // var num = parseInt(this.noticeNum);
          // num++;
          //  this.setNoticeNum(num.toString());
          //  this.getNotice();
        }

      },
      websocketonerror() {
        // this.initWebSocket()
      },
      websocketsend(Data) {
        this.websock.send(Data)
      },
      websocketclose(e) { //关闭
        console.log('断开连接', e);
      },
      //心跳包
      startHeart() {

        if (this.timeoutObj == '') {
          let _this = this;
          this.timeoutObj = setInterval(function() {
            _this.websocketsend('ping');
          }, 40000);

        }
      },
      /*
       *  DES加密 iv
       *  @msg  string  加密内容
       * @key  string  密钥
       */
      encryptDesIv(msg) {
        //console.log(msg)
        //与服务端一致
        const keyHex = CryptoJS.enc.Utf8.parse('56431fsjdosidfjsldkfwo986464');
        const ivHex = CryptoJS.enc.Utf8.parse('pooifn92');
        const encrypted = CryptoJS.DES.encrypt(msg, keyHex, {
          iv: ivHex,
          mode: CryptoJS.mode.CBC,
          padding: CryptoJS.pad.Pkcs7
        });
        return encrypted.toString();
      },
    },
    mounted() {
      let isFullscreen = document.fullscreenElement || document.mozFullScreenElement || document
        .webkitFullscreenElement || document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen
      isFullscreen = !!isFullscreen
      document.addEventListener('fullscreenchange', () => {
        this.$emit('input', !this.value)
        this.$emit('on-change', !this.value)
      })
      document.addEventListener('mozfullscreenchange', () => {
        this.$emit('input', !this.value)
        this.$emit('on-change', !this.value)
      })
      document.addEventListener('webkitfullscreenchange', () => {
        this.$emit('input', !this.value)
        this.$emit('on-change', !this.value)
      })
      document.addEventListener('msfullscreenchange', () => {
        this.$emit('input', !this.value)
        this.$emit('on-change', !this.value)
      })
      this.$emit('input', isFullscreen)
    }
  }
</script>

<style lang="less">
  .ivu-poptip-popper{z-index: 2 !important;}
  .ivu-poptip-popper[x-placement="left"] .ivu-poptip-arrow {
      top: 30px !important;
  }
  .ivu-list-bordered.ivu-list-small .ivu-list-item{position: relative; padding: 8px 10px !important;}
  .ivu-list-item-extra{ position: absolute;right: 10px;}
  .full-screen-btn-con .ivu-tooltip-rel {
    height: 64px;
    line-height: 56px;

    i {
      cursor: pointer;
    }
  }

  .full-screen-btn-con .ivu-badge-count {
    top: 10px;
  }
 .innerbox{
    height: 670px; overflow-y: auto;
  }
   /*滚动条样式*/
.innerbox::-webkit-scrollbar {
    width: 5px;
}
.innerbox::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.2);
}
.innerbox::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 0;
    background: rgba(0,0,0,0.1);
}

</style>
